<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 梁清福
 * @LastEditTime: 2022-01-10 20:58:02
-->
<template>
  <!--1. 容器 -->
  <div  ref="left2_container" style="height:95%"></div>
</template>
<script>
import { Bar } from '@antv/g2plot';

export default ({
  mounted(){
      this.initChart()
  },
  methods:{
    initChart(){
        const data = [
  {
    type: '山西农业大学',
    sales: 2,
  },
  {
    type: '晋中学院',
    sales: 1,
  },
  {
    type: '太谷火车站',
    sales: 2,
  },
   {
    type: '金谷广场',
    sales: 1,
  }
 
];

const barPlot = new Bar(this.$refs.left2_container, {
  data,
  xField: 'sales',
  yField: 'type', 
  seriesField: 'type',
  color: ({ type }) => {
    return type === '山西农业大学' ? '#FAAD14' : '#5B8FF9';
  },
  legend: false,
  meta: {
    type: {
      alias: '地名',
    },
    sales: {
      alias: '设备数',
    },
  },
});

barPlot.render();
    }
  }
})
</script>
